import 'package:animated_background/animated_background.dart';
import 'package:crackTheLock/color.dart';
import 'package:crackTheLock/game.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:line_icons/line_icons.dart';

class StartPage extends StatefulWidget {
  StartPage({Key key}) : super(key: key);

  @override
  _StartPageState createState() => _StartPageState();
}

class _StartPageState extends State<StartPage> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBackground(
        vsync: this,
        behaviour: RandomParticleBehaviour(
          options: ParticleOptions(
            baseColor: Color.fromARGB(255, 0, 81, 255),
            spawnMinSpeed: 10,
            spawnMaxSpeed: 25,
            spawnMinRadius: 15,
            spawnMaxRadius: 50,
            particleCount: 12,
            minOpacity: 0.05,
            maxOpacity: 0.25,
            opacityChangeRate: 2,
          ),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Expanded(
                child: Container(
              alignment: Alignment.center,
              child: Text(
                "数字\n解密",
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: darkgrey,
                  fontSize: 62,
                  fontWeight: FontWeight.bold,
                  letterSpacing: 1.5,
                ),
              ),
            )),
            Container(
              height: MediaQuery.of(context).size.height * 0.15,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  GestureDetector(
                    onTap: () {
                      Navigator.of(context).push(
                          MaterialPageRoute(builder: (context) => GamePage()));
                    },
                    child: Container(
                      height: 60,
                      width: 140,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: activeBlue,
                        boxShadow: [
                          BoxShadow(
                              color: activeBlue.withOpacity(0.2),
                              offset: Offset(1, 1),
                              blurRadius: 6,
                              spreadRadius: 4)
                        ],
                      ),
                      alignment: Alignment.center,
                      child: Text(
                        "开始",
                        style: TextStyle(
                          color: white,
                          fontSize: 25,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      showDialog(
                        context: context,
                        builder: (context) {
                          return AlertDialog(
                            elevation: 0,
                            contentPadding: EdgeInsets.all(20),
                            content: Container(
                              height: 340,
                              child: Column(
                                children: [
                                  Text(
                                    '游戏规则',
                                    style: TextStyle(
                                      color: Color.fromARGB(255, 3, 0, 41),
                                      fontSize: 24,
                                      fontWeight: FontWeight.w600,
                                    ),
                                  ),
                                  SizedBox(height: 20),
                                  Text(
                                    '数字解密是一个有趣的益智游戏，你需要找到4位密码的正确数字及位置。每次输入会提示🟡和🟢。',
                                    style: TextStyle(
                                      color: Color.fromARGB(255, 33, 33, 117),
                                      fontSize: 16,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                  SizedBox(height: 20),
                                  Text(
                                    '例如：提示“🟡 3   🟢 1”代表你猜的四位数字中，有3个数字的数值是正确的，但只有1个数字的位置是正确的。',
                                    style: TextStyle(
                                      color: Color.fromARGB(255, 33, 33, 117),
                                      fontSize: 16,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                  SizedBox(height: 20),
                                  Text(
                                    '这是一个训练大脑逻辑记忆能力的小游戏，会让你很难想出正确的数字组合。你的猜测越正确，给你的提示就越接近。从现在开始玩吧，享受有趣的大脑游戏！',
                                    style: TextStyle(
                                      color: Color.fromARGB(255, 33, 33, 117),
                                      fontSize: 14,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(5)),
                          );
                        },
                      );
                    },
                    child: Container(
                      margin: EdgeInsets.symmetric(horizontal: 18),
                      height: 55,
                      width: 55,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(color: darkgrey, width: 2),
                        color: white,
                      ),
                      alignment: Alignment.center,
                      child: Icon(
                        LineIcons.book,
                        color: darkgrey,
                      ),
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
